<template>
	<div>
		<div>
			<van-nav-bar style="background: #d12d1a;" class="fh"   @click-left="fh" title="登录" left-text="返回" left-arrow />
		</div>
		<van-form @submit="onSubmit">
			<van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' },
    { pattern:/^1[3-9]\d{9}$/, message: '电话格式错误' }
    ]" />
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
    { validator:(val)=>/^\w{6,12}$/.test(val), message: '请输入6-12位的的密码格式' }
    ]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
		<div class="fd">

		
		<div @click="$router.push('zc')" style="margin: 0 20px;">
			还没账号点击注册？
		</div>
		<div @click="wjmm" style="margin: 0 10px 0 0;color: rgb(220,220,220)">
			忘记密码？
		</div>
	</div>
	<div @click="$router.push('sy')" style="margin:20px;">
		暂不登录
	</div>
	</div>
</template>

<script>
	import {
		dluser 
	} from '@/api/dljk.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				username: '',
				password: '',
			};
		},
		methods: {
			// onClickLeft(){
            //    this.$router.back()
			// },
			...mapMutations('mkhuser',['XSYC', 'USERINFO', 'USERID', 'USERTOKEN','xsyc']),
			fh(){
                if(this.xsyc===false){
					console.log(67)
                    this.$toast('您还没有登录请登录')
				}
				else{
					console.log(this.xsyc)
					this.$router.back()
				}
			},
			onSubmit(values) {
				console.log('submit', values); //input里面的值
				dluser(values).then((data) => { //input里面的值传过来 dluser请求接口 传参
					console.log(data)
					// let {
					// 	uid,
					// 	token,                     //解构赋值
					// 	tokenExpired,
					// 	userInfo
					// } = data;
					if (data.code == 0) {
						this.$toast(data.msg);


						// localStorage.setItem('uid', data.uid) //本地存储跟上面解构赋值一样
						localStorage.setItem('token', data.token)  //本地存储的'名字' 和值 只能是字符串
						localStorage.setItem('tokenExpired', data.tokenExpired)    //本地存储的'名字' 和值 只能是字符串
						// localStorage.setItem('userInfo', JSON.stringify(data.userInfo)) //提示data里面msg服务器提示信息


						this.XSYC(true)
						this.USERINFO(data.userInfo)
						this.USERID(data.uid)
						this.USERTOKEN(data.token)











						// this.$root.xsyc = true;
						// this.$root.userInfo = data.userInfo


						setTimeout(() => {
							this.$router.back() //返回上一步
						}, 500)
					} else {
						this.$toast(data.msg) //提示data里面msg服务器提示信息

					}
				})

			},
			wjmm(){
				this.$router.push('wjmm')
			}
		},
	};
</script>

<style scoped>
	.input:-internal-autofill-selected {
		background-color: none;
	}
	::v-deep .van-ellipsis{
		color: #FFB619;
	}
	::v-deep .van-nav-bar__text{
color: #FFB619;
	}
	::v-deep .van-icon-arrow-left{
		color: #FFB619;
	}
	::v-deep .van-button--info{
		background: #d12d1a;
		border: 1px solid #d12d1a;
		color: #FFB619;
	}
	.fd{
		display: flex;
		justify-content: space-between;
	}
</style>
